<template>
	<div class="motion-box">
		<el-table :data="tableData" stripe style="width: 100%" class="motion-table1">
			<el-table-column prop="debateTopicTitle" :label="$t('message.table.title1')" width="400"> </el-table-column>
			<el-table-column prop="debateTopicClassification" :label="$t('message.table.title2')" width="180"> </el-table-column>
			<el-table-column prop="name" :label="$t('message.table.title3')"> </el-table-column>
			<el-table-column prop="debateTopicAddtime" :label="$t('message.table.title4')"> </el-table-column>
			<el-table-column fixed="right" :label="$t('message.table.title9')" width="180">
				<template slot-scope="scope">
					<el-button @click="handleClick(scope.row)" type="text" size="small">{{ $t('message.table.title6') }}</el-button>
					<el-button type="text" size="small" @click="openUpdate(scope.row)">{{ $t('message.table.title7') }}</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div class="page">
			<el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="pageInfo.pagenum"
				:page-sizes="[8, 12, 16, 20]"
				:page-size="pageInfo.pagesize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="total"
			>
			</el-pagination>
		</div>

		<!-- 题解弹窗 -->
		<el-dialog title="题解" :visible.sync="detailsDialogVisible" width="30%" :before-close="handleClose">
			<span v-html="motionDetails"></span>
			<span slot="footer" class="dialog-footer">
				<el-button @click="detailsDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="detailsDialogVisible = false">确 定</el-button>
			</span>
		</el-dialog>
		<!-- 修改辩题弹窗 -->
		<el-dialog style="hegiht: 200px" title="修改辩题" :visible.sync="updateDialogVisible" width="40%" :before-close="handleClose">
			<el-form :model="upDebateTopicData" status-icon label-width="100px" class="demo-ruleForm">
				<el-form-item label="辩题类型">
					<el-select v-model="upDebateTopicData.debateTopicClassification" placeholder="请选择辩题类型">
						<el-option v-for="item in MotionTypeOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="辩题" prop="title">
					<el-input v-model="upDebateTopicData.debateTopicTitle" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="题解">
					<el-input type="textarea" v-model="upDebateTopicData.debateTopicDescription" autocomplete="off"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="updateDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="updateMotionInfo()">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
import { Session } from '@/utils/storage';
import { getMyMotion, updateMotion } from '@/api/motionModular/index.js';
export default {
	name: 'myMotion',
	data() {
		return {
			MotionTypeOptions: [
				{
					value: '价值辩',
					label: '价值辩',
				},
				{
					value: '事实辩',
					label: '事实辩',
				},
				{
					value: '哲学辩',
					label: '哲学辩',
				},
				{
					value: '政策辩',
					label: '政策辩',
				},
			],
			tableData: [],
			detailsDialogVisible: false,
			motionDetails: '',
			upDebateTopicData: {
				debateTopicClassification: '',
				debateTopicDescription: '',
				debateTopicTitle: '',
				debateTopicUploaderId: Session.get('userInfo').otherInfo.id,
				id: 0,
			},
			updateDialogVisible: false,
			pageInfo: {
				// 当前页码
				pagenum: 1,
				// 每页显示条数
				pagesize: 8,
			},
			total: 0,
			// 分页查询数据
			searchKey: {
				id: Session.get('userInfo').otherInfo.id,
				pagenum: '',
				pagesize: '',
			},
		};
	},
	created() {
		this.getMyMotionInfo();
	},
	methods: {
		async getMyMotionInfo() {
			this.searchKey.pagenum = this.pageInfo.pagenum;
			this.searchKey.pagesize = this.pageInfo.pagesize;
			let res = await getMyMotion(this.searchKey);
			if (res.statusCode === 20000) {
				this.tableData = res.data.records;
				this.total = res.data.total
			}
		},

		openUpdate(e) {
			this.upDebateTopicData.debateTopicClassification = e.debateTopicClassification;
			this.upDebateTopicData.debateTopicDescription = e.debateTopicDescription;
			this.upDebateTopicData.debateTopicTitle = e.debateTopicTitle;
			this.upDebateTopicData.id = e.id;
			this.updateDialogVisible = true;
		},
		async updateMotionInfo() {
			let res = await updateMotion(this.upDebateTopicData);
			if (res.statusCode === 20000) {
				this.updateDialogVisible = false;
				this.getMyMotionInfo();
			}
		},

		handleClick(e) {
			console.log(e);
			this.motionDetails = e.debateTopicDescription;
			this.detailsDialogVisible = true;
		},
		handleClose(done) {
			this.$confirm('确认关闭？')
				.then((_) => {
					done();
				})
				.catch((_) => {});
		},
		handleSizeChange(val) {
			// this.flag = false;
			this.pageInfo.pagesize = val;
			this.getMyMotionInfo();
			// setTimeout(this.isTrue, 200);
		},
		handleCurrentChange(val) {
			// this.flag = false;
			this.pageInfo.pagenum = val;
			this.getMyMotionInfo();
			// setTimeout(this.isTrue, 200);
		},
	},
};
</script>

<style lang="scss" scoped>
.motion-table1 {
	opacity: 0;
	animation-name: error-num;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
	animation-delay: calc(1 / 10) + s;
}
</style>